<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>滚动条滚动到底的应用</title>
        <script type="text/javascript">
            //设计操作：当用户阅读完协议之后，可以确认注册信息。
            window.onload = function(){
                var info = document.getElementById("info");
                var input = document.getElementsByTagName("input")[0];
                var button = document.getElementsByTagName("button")[0];
                //设置滚动条滚动事件，当滚动条到底时，复选框和按钮可以使用
                info.onscroll = function(){
                    if(info.scrollHeight - info.scrollTop == info.clientHeight){
                        input.disabled = false;
                        button.disabled = false;
                    }
                };
            };
        </script>
        <style>
            #info{
                width: 300px;
                height: 500px;
                background-color: #bfa;
                overflow: auto;
                margin: 15px;
            }
        </style>
    </head>
    <body>
        <div id="info">
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；请认真阅读这些内容，将方便您注册信息；
            请认真阅读这些内容，将方便您注册信息.
        </div>
        <input type="checkbox" disabled="disabled">请确认是否已经阅读上述内容。
        <button disabled="disabled">注册</button>

    </body>
</html>